{{setTitle "Landing Page Layout Example"}}
{{addLocalCSS "/css/layouts/marketing.css"}}


<div class="content pure-g-r">
    <div class="header pure-u-1">
        <div class="pure-menu pure-menu-open pure-menu-fixed pure-menu-horizontal">
            <a class="pure-menu-heading" href="">Your Site</a>

            <ul>
                <li class="pure-menu-selected"><a href="#">Home</a></li>
                <li><a href="#">Tour</a></li>
                <li><a href="#">API</a></li>
                <li><a href="#">Blog</a></li>
                <li><a href="#">About</a></li>
            </ul>
        </div>
    </div>

    <div class="splash pure-u-1">
        <div class="pure-g-r">
            <div class="pure-u-1-3">
                <div class="l-box splash-image">
                    <img src="http://placehold.it/500x350"
                         alt="Placeholder image for example.">
                </div>
            </div>

            <div class="pure-u-2-3">
                <div class="l-box splash-text">
                    <h1 class="splash-head">
                        Some big bold text.
                    </h1>

                    <h2 class="splash-subhead">
                        The HTML and CSS for this layout show how you can make a modern, responsive landing page for your next product. Browse through the source to see how we use menus and responsive grids to create this layout. Shrink your browser width and watch the layout transform and play nice with small screens.
                    </h2>

                    <p>
                        <a href="#" class="pure-button primary-button">Get Started</a>
                    </p>
                </div>
            </div>
        </div>
    </div>

    <div class="content pure-u-1">
        <div class="pure-g-r content-ribbon">
            <div class="pure-u-2-3">
                <div class="l-box">
                    <h4 class="content-subhead">Some small text</h4>

                    <h3>Lorem ipsum dolor sit amet.</h3>
                    <p>
                        Pellentesque hendrerit lobortis ornare. Fusce luctus imperdiet consequat. Nullam quis nunc quis ligula luctus vestibulum non quis libero. Suspendisse tristique nisl ut velit facilisis sit amet lobortis nulla pharetra.
                    </p>
                </div>
            </div>

            <div class="pure-u-1-3">
                <div class="l-box">
                    <img src="http://placehold.it/400x250"
                         alt="Placeholder image for example.">
                </div>
            </div>
        </div>

        <div class="pure-g-r content-ribbon">
            <div class="pure-u-1-3">
                <div class="l-box">
                    <img src="http://placehold.it/400x250"
                         alt="Placeholder image for example.">
                </div>
            </div>

            <div class="pure-u-2-3">
                <div class="l-box">
                    <h4 class="content-subhead">Some more small text</h4>

                    <h3>Etiam iaculis iaculis lobortis.</h3>
                    <p>
                        Phasellus eget enim eu lectus faucibus vestibulum. Suspendisse sodales pellentesque elementum. Morbi fermentum dui sit amet libero tincidunt rutrum. Nam sodales consequat metus sed accumsan.
                    </p>
                </div>
            </div>
        </div>

        <div class="pure-g-r">
            <div class="pure-u-1-4">
                <div class="l-box">
                    <h3>Subheading</h3>
                    <p>
                        Donec suscipit, risus vel venenatis ornare, nibh massa ultrices diam, a elementum metus felis sit amet eros. Phasellus pellentesque euismod massa sed pellentesque.
                    </p>
                </div>
            </div>

            <div class="pure-u-1-4">
                <div class="l-box">
                    <h3>Subheading</h3>
                    <p>
                        Donec suscipit, risus vel venenatis ornare, nibh massa ultrices diam, a elementum metus felis sit amet eros. Phasellus pellentesque euismod massa sed pellentesque.
                    </p>
                </div>
            </div>

            <div class="pure-u-1-4">
                <div class="l-box">
                    <h3>Subheading</h3>
                    <p>
                        Donec suscipit, risus vel venenatis ornare, nibh massa ultrices diam, a elementum metus felis sit amet eros. Phasellus pellentesque euismod massa sed pellentesque.
                    </p>
                </div>
            </div>

            <div class="pure-u-1-4">
                <div class="l-box">
                    <h3>Subheading</h3>
                    <p>
                        Donec suscipit, risus vel venenatis ornare, nibh massa ultrices diam, a elementum metus felis sit amet eros. Phasellus pellentesque euismod massa sed pellentesque.
                    </p>
                </div>
            </div>
        </div>

        <div class="pure-g-r">
            <div class="pure-u-1">
                <div class="l-box ribbon">
                    <h2>Get started now.</h2>
                    <a href="#" class="pure-button primary-button">Sign up</a>
                </div>
            </div>
        </div>
    </div>

    <div class="footer pure-u-1">
        View the source of this layout to learn more. Made with love by the YUI Team.
    </div>
</div>

<script src="http://yui.yahooapis.com/{{yui_version}}/build/yui/yui{{min}}.js"></script>
{{> prevent-scroll}}
